<template>
    <div style="background-color: #ffffff;">
        <!-- :before-change="beforeChange" -->
        <!-- <HeadNav :title="'修改记录'"></HeadNav> -->
        <!-- 周月年 -->
        <div class="content">
            <div class="topBox">
                <div class="sort-menu">
                    <!-- <div :class="[current === index ? 'sort_option_selected ' : '', 'sort_option']"
                        v-for="(item, index) in tabList" :key="index" :id="index"
                        @click="changeSort(index, $event, item.typeName)">
                        <div class="couponSpanText">{{ item.typeName }}</div>
                    </div> -->
                    {{rawMaterial_name}}
                </div>
            </div>
            <div class="recordList" :style="dataLists.length > 0 ? bottomHeight : ''">
                <template v-if="dataLists.length > 0 && !loading">
                    <div class="recordItem" v-for="(item, index) in dataLists" :key="index" >
                        <div class="recordItem_bg">
                            <div class="recordItem_top">
                                <div class="rawMaterial_name">{{ item.applyTime }} <span class="status"
                                        >({{ index=== (dataLists.length - 1) ? '新增' : '修改'}})</span> </div>
                                <div class="actBtn">{{item.applyStatus==='apply' ? '待审核': (item.applyStatus==='agree' ? '审核通过' : (item.applyStatus==='disagree' ? '审核失败' : (item.applyStatus==='cancel' ? '取消':'' ))) }}</div>
                            </div>
                            <div class="recordItem_bottom">
                                <div class="bottom_item" v-if="index ==  dataLists.length-1 ||item.specification != dataLists[index+1].specification">
                                    <div class="label">规格</div>
                                    <div class="text">{{ item.specification }}</div>
                                </div>
                                <div class="bottom_item" v-if="index ==  dataLists.length-1 || item.unit != dataLists[index+1].unit">
                                    <div class="label">单位</div>
                                    <div class="text">{{ item.unit }}</div>
                                </div>
                                <div class="bottom_item" v-if="index == dataLists.length-1 || item.unitPrice != dataLists[index+1].unitPrice">
                                    <div class="label">价格</div>
                                    <div class="text">{{ item.unitPrice }}</div>
                                </div>
                                <div class="bottom_item" v-if=" index == dataLists.length-1 ||  item.status != dataLists[index+1].status">
                                    <div class="label">状态</div>
                                    <div class="text">{{ item.status =='disable' ? '禁用': '启用' }}</div>
                                </div>
                            </div>
                            <div class="remark" v-if="item.rejectReason">备注：{{item.rejectReason}}</div>
                        </div>
                    </div>
                </template>
                <template v-if="dataLists.length === 0 && !loading">
                    <div class="empty_content">当前暂无数据</div>
                </template>
            </div>
            <!-- <div :class="[dataLists.length > 0 ? 'applyBtn' : 'applyCenterBtn']" v-if="current === 0" ref="bottomBtn">
                <van-button type="primary" class="sub_btn" @click="toPreserveApply()">新增原材料 </van-button>
            </div> -->
        </div>
        <!-- <foot></foot> -->
        <!-- <van-popup v-model="showTipsSingle" :closeable="true" round style="width: 80%;padding-bottom: 24px;">
            <div class="top_title">您是否确认撤销当前原材料申请？</div>
            <div class="popup_sub_btn" @click="submitCancel">
                确定
            </div>
        </van-popup> -->
    </div>
</template>

<script>
/* eslint-disable */
import { getParams } from '@/common/public'
import HeadNav from '@/components/HeadNav'
import foot from '../foot/foot.vue'
import { getOneMaterialApplyRecordsApi } from '@/api/supplier'
import { Toast } from 'vant';

export default {
    name: 'ChangeRecord',
    components: {
        HeadNav,
        foot
    },
    computed: {
        // ...mapState({
        //     token: (state) => state.applyrecords.token
        // })
    },
    watch: {
        active(newVal) {
            console.log('newVal', newVal)
            if (newVal === 0) {

            } else if (newVal === 0) {

            } else {

            }
        }
    },
    data() {
        return {
            active: 0,
            loading: true,
            // tabList: [
            //     {
            //         typeId: 0,
            //         typeName: '原材料'
            //     },
            //     {
            //         typeId: 1,
            //         typeName: '待审核'
            //     }
            // ],
            recordList: [],
            show: true,
            current: 0,
            currentItem: -1,
            showTipsSingle: false,
            popupItem: undefined,
            dataLists: [
                {
                    id: 1,
                    applyTime:'2025.02.06 15:26:30',
                    name: '新东大鸡排',
                    status: 'enable',
                    specification: '4袋32片(20公斤)',
                    applyStatus: "agree",
                    handle:'修改'
                },
                {
                    id: 2,
                    applyTime:'2025.02.06 15:26:30',
                    name: '新东大鸡排',
                    status: 'enable',
                    specification: '4袋32片',
                    unit: '件',
                    price: '170',
                    applyStatus: "agree", 
                    handle:'修改',
                    remark:'审核失败原因'
                },
                // {
                //     id: 3,
                //     applyTime:'2025.02.06 15:26:30',
                //     name: '新东大鸡排',
                //     status: 'false',
                //     unit: '件',
                //     price: '160',
                //     review: 2, //审核未通过
                //     handle:'修改',
                //     remark:'审核失败原因'
                // },
                // {
                //     id: 1,
                //     applyTime:'2025.02.06 15:26:30',
                //     name: '新东大鸡排',
                //     status: 'false',
                //     price: '170',
                //     review: 1, //审核通过
                //     handle:'修改'
                // },
                // {
                //     id: 2,
                //     applyTime:'2025.02.06 15:26:30',
                //     name: '新东大鸡排',
                //     status: 'true',
                //     unit: '件',
                //     price: '170',
                //     review: 1, //审核通过 
                //     handle:'修改'
                // },
                {
                    id: 3,
                    applyTime:'2025.02.06 15:26:30',
                    name: '新东大鸡排',
                    status: 'true',
                    specification: '4袋32片(20公斤)',
                    unit: '件',
                    price: '170',
                    review: 1, //审核通过
                    handle:'新增'
                }
            ],
            bottomHeight: '',
            rawMaterial_name:'',
            materialId:undefined,
        }
    },

    beforeRouteEnter(to, from, next) {
         // to: 即将要进入的目标路由对象
        // from: 当前导航正要离开的路由对象
        // next: 用于控制导航的函数，必须调用它来 resolve 这个钩子
        next((vm) => {
            if(to.query.item !== undefined){
                vm.localData = JSON.parse(to.query.item)
                console.log(vm.localData,'params')
                vm.rawMaterial_name=vm.localData.rawMaterial_name
                vm.materialId = vm.localData.materialId
            }
        })
    },
    mounted() {
        // this.loading = false
        this.getOneMaterialApplyRecordsList(this.materialId)

        // this._outToday()
        // const menuHeight = this.$refs.bottomBtn.offsetHeight;
        // console.log('底部菜单栏高度：', menuHeight);
        // // const footerMenu=this.$refs.footerMenu.footerMenu
        // // console.log('底部菜单栏高度111aaa：', footerMenu);
        // this.bottomHeight = `padding-bottom: ${Number(menuHeight) + 45}px;`
        // console.log(this.bottomHeight, 'bottomHeight')

    },
    created() {

    },

    methods: {
        // // 出库弹窗
        // submitCancel() {
        //     console.log(this.popupItem, 'ii')
        //     this.showTipsSingle = false
        // },

        // changeSort(index, e, name) {
        //     this.current = index
        //     // this._outToday()
        // },
        // // 留存填报
        // toPreserveApply() {
        //     this.$router.push({
        //         path: '/preserveApply'
        //     })
        // },
        /**
         * 接口
         */
        getOneMaterialApplyRecordsList(materialId){
            this.loading = true
            getOneMaterialApplyRecordsApi(materialId).then(res=>{
                if(res.code === 200){
                    this.dataLists=res.data
                    this.loading = false
                }
            })
        }
    },
    beforeDestroy() {
        console.log('index')
        window.removeEventListener('scroll', this.onLoad, true)
    }
}
</script>

<style lang="less" scoped>
span,
p {
    padding: 0;
    margin: 0;
}

.content {
    overflow: hidden;
    margin-bottom: 10px;
    background: #ffffff;
    height: 100%;
    // padding-bottom: 50px;
}

// 页面顶部的 未出库  已出库
.topBox {
    // margin-top: 44px; //headNav使用时  不注释
    width: 100%;
    background-color: #f9f9f9;
    // height: 48px;
    position: fixed;
    z-index: 20;
    // padding-bottom: 15px;


    // 全部分类  menu
    .sort-menu {
        background-color: #ffffff;
        padding-left: 24px;
        padding-right: 24px;
        width: calc(100% - 48px);
        height: 48px;
        line-height: 48px;
        font-size: 16px;
        text-align: left;
        color: #000000;
    }
}

.recordList {
    margin-top: 48px;
    background: #f9f9f9;
    padding-top: 10px;
    // height: 100%;
    // overflow: auto;
    // padding-bottom: 70px;
}


.recordItem {
    background-color: #f9f9f9;
    padding-bottom: 5px;
    // margin-bottom: 5px;

    .recordItem_bg {
        background: #ffffff;
        padding: 24px;
    }

    .recordItem_top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .rawMaterial_name {
            font-size: 16px;
            text-align: left;
            color: #000000;
            line-height: 16px;
            display: flex;
            align-items: center;
        }

        .status {
            font-size: 12px;
            color: #999999;
            line-height: 12px;
            margin-left: 6px;
        }

        .actBtn {
            font-size: 12px;
            line-height: 12px;
            text-align: right;
            color: #5FA3D9;
            // border-radius: 18px;
            // border: 1px solid #047DCB;
            // padding: 4px 10px;
        }

    }



    .recordItem_bottom {
        // display: flex;
        // align-items: center;
        // justify-content: space-between;
        margin-top: 20px;

        .bottom_item {
            // flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            text-align: center;

            .label {
                font-size: 12px;
                color: #999999;
                line-height: 12px;
            }

            .text {
                font-size: 14px;
                color: #000000;
                line-height: 14px;
                margin-top: 10px;
                text-align: right;
            }

        }
    }
    .remark{
        margin-top: 24px;
        font-size: 12px;
        color: #000000;
    }
}

.recordItem:last-child {
    margin-bottom: 0px;
}

.details_box {
    padding: 0px 24px 12px 24px;
    height: 100%;
    overflow: auto;
}

.goods-box {
    background-color: #ffffff;
    padding: 12px 24px 12px 34px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    justify-content: space-between;

    .goods-title {
        font-size: 12px;
        line-height: 12px;
        text-align: left;
        color: #000000;
    }

    .goods-num {
        display: flex;
        align-items: center;

        .selectnum {
            font-size: 12px;
            text-align: center;
            color: #000000;
            margin: 0px 3px;
        }
    }

    .plus {
        width: 15px;
        height: 15px;
        background: #047DCB;
        border: none;
    }

    .minus {
        width: 15px;
        height: 15px;
        border: 1px solid #047DCB;
    }

    /deep/.van-button--normal {
        color: #ffffff !important;
        padding: 5px;
    }
}

.btnArea {
    padding: 24px;
    text-align: center;
}

/*清浮动*/
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

.clearfix {
    zoom: 1;
}



/deep/.van-tabs__wrap {
    touch-action: manipulation;
    border-top: none;
}

/deep/.van-tab {
    border-top: none;
    border-bottom: 1px solid rgba(245, 244, 249, 1);
}


.btnStockIn {
    border: 1px solid #047DCB;
    border-radius: 40px;
    color: #047DCB;
}

// 去逛逛
.loginBtn {
    width: 100%;
    height: 45px;
    border: none;
    background: #047DCB;
    border-radius: 45px;
}

.tips {
    margin-top: 25px;
    font-size: 14px;
    text-align: right;
    color: #000000;
    line-height: 14px;
}

.recordBottom {
    padding: 12px 24px;

    .recordBottom_item {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .recordBottom_item_label {
            font-size: 12px;
            line-height: 12px;
            text-align: left;
            color: #999999;
        }

        .recordBottom_item_text {
            font-size: 12px;
            line-height: 12px;
            text-align: left;
            color: #000000;
        }

        .recordBottom_item_name {
            display: flex;
            align-items: center;
            font-size: 12px;
            line-height: 12px;
            // text-align: left;
            color: #000000;

            img {
                width: 54px;
                height: 30px;
            }

            .recipient {
                width: 44px;
                height: 20px;
            }
        }

    }
}

.btnArea {
    padding: 12px 24px;
    text-align: center;
}

.stockOutBtn {
    border: 1px solid #047DCB;
    color: #047DCB;
    border-radius: 40px 40px 40px 40px;
    background: #ffffff;
    width: 100%;
    height: 45px;
}

// 无数据
.empty_content {
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #000000;
    font-size: 16px;
    background: #ffffff;
}

.mr12 {
    margin-right: 12px;
}

.mt19 {
    margin-top: 19px;
}

// 弹窗
.top_title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #000;
    font-size: 15px;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 30px;
}

// 弹窗确认按钮
.popup_sub_btn {
    width: 80%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 22px;
    color: #fff;
    background: #047DCB;
    margin: 8px auto;
    font-size: 15px;
}

// 留存填报按钮
.applyBtn {
    padding: 12px 24px;
    position: fixed;
    bottom: 50px;
    width: calc(100% - 48px);
    background-color: #ffffff;
}

// 按钮居中
.applyCenterBtn {
    padding: 12px 24px;
    width: calc(100% - 48px);
    background-color: #ffffff;
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.sub_btn {
    width: 100%;
    height: 45px;
    border: none;
    color: #fff;
    font-size: 15px;
    background: #047DCB;
    border-radius: 45px;
    text-align: center;
}
</style>